<template>
  <div>
    <el-dialog :visible.sync="show" :show-close="false" @close="closeDialog">
      <!-- 头部搜索 start -->
      <div slot="title" style="border-bottom: 1px solid #eee">
        <SearchForm
          :form-option="formOption"
          :show-btn="true"
          :btn-list="btnList"
          v-model="formOption.formData"
          label-width="120px"
        />
      </div>
      <!-- 头部搜索 end -->

      <!-- 列表 start -->
      <PageTable :loading="loading" :data="dataSource" :columns="columns" :options="options" />
      <!-- 列表 end -->

      <span slot="footer" class="dialog-footer">
        <Pagination
          v-show="total > 0"
          :total="total"
          :pageNo.sync="listQuery.pageNo"
          :pageSize.sync="listQuery.pageSize"
          :pageSizes="[5, 10, 20, 30, 50, 100, 200, 500]"
          @pagination="getList"
        />
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="confirmCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CompanyEditCheck',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 选择用户
      checkUser: {},
      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'input',
            label: '会员名称/电话',
            size: 'mini',
            value: 'nickNameOrMobile'
          }
        ],
        formData: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getList()
          }
        }
      ],
      // 表格配置
      options: {
        border: false,
        select: false,
        header: false
      },
      avatar: require('@/assets/avatar.png'),
      // 表格加载
      loading: false,
      // 表格配置
      columns: [
        {
          render: (h, { row }) => {
            const index = row.profilePhoto.lastIndexOf('/')
            const avatar = row.profilePhoto.slice(index + 1)
            const flag = row.profilePhoto && avatar !== 'u_default.png'
            return (
              <div style={'display: flex'}>
                {flag ? (
                  <img style={'width: 60px;height: 60px;'} src={row.profilePhoto} />
                ) : (
                  <img style={'width: 60px;height: 60px;'} src={this.avatar} />
                )}
                <div
                  class="ml-10 pt-5 pb-5"
                  style={
                    'display: flex;flex-direction: column;justify-content: space-between;align-items:flex-start'
                  }
                >
                  <p>{row.nickName}</p>
                  <p>{row.mobile}</p>
                </div>
              </div>
            )
          }
        },
        {
          width: '50px',
          render: (h, { row }) => {
            return (
              <el-radio v-model={this.checkUser} label={row}>
                <span></span>
              </el-radio>
            )
          }
        }
      ],
      // 表格数据
      dataSource: [],
      // 数据总数
      total: 0,
      // 分页配置
      listQuery: {
        pageNo: 1,
        pageSize: 5
      }
    }
  },
  computed: {
    // 是否显示
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch: {},
  created() {
    // 获取用户列表
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取用户列表--
    async getList() {
      try {
        // 参数整理
        const params = {
          ...this.listQuery,
          nickNameOrMobile: this.formOption.formData?.nickNameOrMobile ?? ''
        }
        // 发送请求
        const res = await this.$http.user.user.notEtpList({ params })
        this.dataSource = res.data.records
        this.total = res.data.total
      } catch (error) {
        console.log('CompanyEditCheck-getList', error)
      }
    },

    // 对话框关闭
    closeDialog() {
      this.checkUser = {}
    },

    // 确认选择用户
    confirmCheck() {
      this.$emit('confirmCheckUser', this.checkUser)
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
